<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c"%> 
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>后台系统</title>
 	<base href="${Context}">
    <link rel="stylesheet" type="text/css" href="css/metro/easyui.css">
    <link rel="stylesheet" type="text/css" href="css/theme/mobile.css">
    <link rel="stylesheet" type="text/css" href="css/theme/color.css">
    <link rel="stylesheet" type="text/css" href="css/theme/icon.css">
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="js/jquery.easyui.mobile.js"></script>
    <link rel="stylesheet" type="text/css" href="css/XimiStyle.css">
    <style type="text/css">
        .InfoText {
            color: #B8860B;
            font-size: 15px;
            font-weight: 500;
        }

        .SaleDialogText {
            font-size: 18px;
        }
    </style>
</head>

<body style="height: 99%">
<c:if test="${user.playerId==null }">
	<script type="text/javascript">
		$.messager.alert("提示", "您的账号还未绑定游戏ID！将无法使用该平台,请联系客服解决.");
	</script>
</c:if>
<div class="easyui-navpanel" style="height: 100%" >
    <table id="TableMember" data-options="header:'#HeaderTableMember',singleSelect:true,fit:true,fitColumns:true,
        pagination:true,scrollbarSize:0,onClickCell:OnClickCell"></table>
    <div id="HeaderTableMember" style="">
        <div id="InfoArea" style="background-color: #EAEAEA; padding: 4px 14px;">
               <div class="InfoText"style="line-height: 25px">俱乐部ID：
					<select id="clubIdSelect" class="select" style="line-height: 25px;" >
						<c:forEach var="club" items="${clubs }">
							<option value="${club.clubId }" data-clubName="${club.clubName }"  data-clubAdvanceDiamond="${club.clubAdvanceDiamond }"
							 data-clubSize="${club.clubSize }"
							 data-clubManagerId="${club.clubManagerId }"
							 >${club.clubId }</option>
						</c:forEach>
					</select>
					
					
				</div>
                <div class="InfoText">俱乐部名：
                    <span id="selectClubName" class="InfoText"></span>
                </div>
            <div class="InfoText">俱乐部人数：<span id="clubSize" class="InfoText"></span></div>
            <div class="InfoText">
            	管理员ID:<span id="managerInfo_Id" class="InfoText">${user.id }</span>
            	<span style="margin-left: 10%;">剩余钻石：<span id="BalanceDiamond" class="InfoText">${user.agentCoin }</span></span>
            	
            </div>
        </div>
        <input id="SearchKey" type="text" placeholder="请输入id或者昵称" maxlength="16" style="width: 35%; height: 30px;">
        <a href="javascript:void(0)" class="easyui-linkbutton c6" style="padding: 0px 10px;"
           onclick="OnClickSearch()">搜索</a>
        <a href="javascript:void(0)" class="easyui-linkbutton c6" onclick="OnClickAllMember()">所有成员</a>
        
        <a href="${Context}main/billContro" target="_self" class="easyui-linkbutton c3" style="float: right">VIP管理</a>
    </div>

    
    <div id="ModalSale" class="easyui-dialog" style="width:90%;padding:20px;"
         data-options="inline:true,modal:true,closed:true,title:'发货'">
        <div class="SaleDialogText">名称：
            <span id="BuyerName" class="SaleDialogText"></span>
        </div>
        <div class="SaleDialogText" style="margin-top: 10px">ID：
            <span id="BuyerId" class="SaleDialogText"></span>
        </div>
        <div class="SaleDialogText" style="margin-top: 10px">对方剩余钻石：
            <span id="BuyerBalance" class="SaleDialogText"></span>
        </div>
        <input id="SaleNum" type="text" pattern="[0-9]" placeholder="请输入发货数量..." style="width: 100%; height: 30px;
        margin-top: 10px;">
        <div class="dialog-button" style="padding: 20px">
            <a href="javascript:void(0)" class="easyui-linkbutton c1" style="width:100%;height:40px;"
               onclick="OnClickSaleOk()">确&nbsp;&nbsp;&nbsp;定</a>
            <a href="javascript:void(0)" class="easyui-linkbutton c2" style="width:100%;height:40px; margin-top: 20px;"
               onclick="$('#ModalSale').dialog('close')">取&nbsp;&nbsp;&nbsp;消</a>
        </div>
    </div>

    
    <div id="ModalNote" class="easyui-dialog" style="width:90%;padding:20px;"
         data-options="inline:true,modal:true,closed:true,title:'备注'">
        <div>
            <textarea id="NoteEdit" placeholder="备注..." style="width:100%;height:20%"></textarea>
        </div>
        <div class="dialog-button" style="padding: 20px">
            <a id="NoteOk" href="javascript:void(0)" class="easyui-linkbutton c1" style="width:100%;height:40px;"
               onclick="OnClickNoteOk()">确&nbsp;&nbsp;&nbsp;定</a>
            <a href="javascript:void(0)" class="easyui-linkbutton c2" style="width:100%;height:40px; margin-top: 20px;"
               onclick="$('#ModalNote').dialog('close')">取&nbsp;&nbsp;&nbsp;消</a>
        </div>
    </div>

    
    <div id="ModalOpt" class="easyui-dialog" style="width:90%;padding:20px;"
         data-options="inline:true,modal:true,closed:true,title:'成员管理'">
        <div class="SaleDialogText">玩家名称：
            <span id="OptMemberName" class="SaleDialogText"></span>
        </div>
        <div class="SaleDialogText" style="margin-top: 10px">玩家ID：
            <span id="OptMemberId" class="SaleDialogText"></span>
        </div>
        <div class="SaleDialogText" style="margin-top: 10px">所欠房费：
            <span id="OptArrearage" class="SaleDialogText" style="color: red;">0</span>
        </div>
        <div class="dialog-button" style="padding: 20px">
            <a href="javascript:void(0)" class="easyui-linkbutton c3" style="width:100%;height:40px;"
               onclick="clearArrearage()">清空欠费</a>
            <a href="javascript:void(0)" class="easyui-linkbutton c5" style="width:100%;height:40px; margin-top: 20px;"
               onclick="OnClickKickOut()">踢出俱乐部</a>
            <a href="javascript:void(0)" class="easyui-linkbutton c2" style="width:100%;height:40px; margin-top: 20px;"
               onclick="$('#ModalOpt').dialog('close')">取&nbsp;&nbsp;&nbsp;消</a>
        </div>
    </div>
    <div id="ModalConfirm" class="easyui-dialog" style="width:80%;padding:20px;"
         data-options="inline:true,modal:true,closed:true,title:'提示'">
        <div id="ModalConfirmContent" style="text-align: center; font-size: 20px;"></div>
        <div class="dialog-button" style="padding: 20px">
            <a id="ModalConfirmBtnOk" href="javascript:void(0)" class="easyui-linkbutton c1"
               style="width:100%;height:40px;">确&nbsp;&nbsp;&nbsp;定</a>
            <a id="ModalConfirmBtnCancel" href="javascript:void(0)" class="easyui-linkbutton c2"
               style="width:100%;height:40px; margin-top: 20px;"
               onclick="$('#ModalConfirm').dialog('close')">取&nbsp;&nbsp;&nbsp;消</a>
        </div>
    </div>
</div>


    

</body>
<script type="text/javascript">
var sys=sys || {};
sys.context = "${Context}";
sys.contextPath="${ContextPath}";
    var g_aClubListData = [];
    var g_oClubData = null;
    var g_oAgentInfo = null;

    (function () {
        InitView();
        InitData();
        var pager =  $("#TableMember").datagrid('getPager');	// get the pager of datagrid
        pager.pagination({layout:['links']});
        
        $("#clubIdSelect").on("change",function(){
    		$("#selectClubName").html($("#clubIdSelect option:selected").attr("data-clubName"));
        	$("#clubSize").html($("#clubIdSelect option:selected").attr("data-clubSize"));
        	var clubId=$("#clubIdSelect").val(),managerId=$("#clubIdSelect option:selected").attr("data-clubManagerId");
        	if(clubId && managerId) InitTable(clubId,managerId);
        	
    	});
        function InitView() {
        	$("#selectClubName").html($("#clubIdSelect option:selected").attr("data-clubName"));
        	$("#clubSize").html($("#clubIdSelect option:selected").attr("data-clubSize"));
        	
        	var clubId=$("#clubIdSelect").val(),managerId=$("#clubIdSelect option:selected").attr("data-clubManagerId");
        	if(clubId && managerId) InitTable(clubId,managerId);
        	
        }

        function InitData() {
            //GetAgentInfo();
           // GetClubListData();
        }

    })();
    
    function GetAgentInfo() {
        var oReqData = {};
        g_oAgentInfo={"agent_id":16302,"agent_type":2,"chips":9,"game_id":3,"id":16300,"recharge":0,"sub_num":0,"total_buy_chips":10,"total_recharge":0,"total_sale_chips":1,"user_name":"15828334211"}
        /* $.post("#", oReqData, function (data) {
            g_oAgentInfo = JSON.parse(data);
            console.log(g_oAgentInfo);
            $('#Balance').html('' + g_oAgentInfo.chips);
        }, "text").error(function () {
            $.messager.alert("错误", "获取个人信息失败！", 'error');
        }); */
        $('#Balance').html('' + g_oAgentInfo.chips);
    }

    function GetClubListData() {
//        获取俱乐部信息
        $.post("#", {
            "data": ""
        }, function (data) {
            if (data == 'error') {
                $.messager.alert("提示", "获取群信息失败！");
            } else {
                g_aClubListData = JSON.parse(data);
                console.log("respond club list data-->");
                console.table(g_aClubListData);
                CreateTabs();
            }
        }, "text").error(function () {
            $.messager.alert('错误', '获取俱乐部列表错误！', 'error');
        });
    }

    function CreateTabs() {
        if (!g_aClubListData || (1 > g_aClubListData.length)) {
            console.log('club list data length is null!');
            return;
        }
        var nCount = g_aClubListData.length;
        if (0 >= nCount) {
            console.log('club list data length is smaller than 0!');
            return;
        }
        var oClubName = $('#ClubName');
        if (1 == nCount) {
            oClubName.html(g_aClubListData[0].club_name);
            OnSelectClub(g_aClubListData[0]);
        } else if (1 < g_aClubListData.length) {
            $('#SelectClub').combobox('loadData', g_aClubListData);
            $('#SelectClub').combobox('select', g_aClubListData[0].club_id);
        }
    }

    function OnSelectClub(oRecord) {
        console.log('OnSelectClub()-->', oRecord);
        g_oClubData = oRecord;
        $('#ClubId').html('' + g_oClubData.club_id);
    }

    function InitTable(clubId,managerId) {
            $('#TableMember').datagrid({
                url: sys.context+'main/getMembers',
                method: 'post',
                queryParams: {
                    'clubId': clubId
                },
                onLoadSuccess: function (data) {
                    $('#clubSize').html(data.total);
                },
                columns: [
                    [{
                        field: 'playerId',
                        title: '玩家ID',
                        align: 'center',
                    }, {
                        field: 'playerName',
                        title: '昵称',
                        width: 100,
                        align: 'center'
                    }, {
                        field: 'playerDiamond',
                        title: '钻石',
                        align: 'center'
                    }, {
                        field: 'remarks',
                        title: '备注',
                        width: 50,
                        align: 'center',
                        formatter: function (value, row, index) {
                            if (value) {
	                         	var oSpan = $('<span>'),spanText=$("<span>");
	                         	spanText.html(value).attr('onclick', 'OnClickNote(' + index + ')');
	                         	oSpan.append(spanText);
                         		return oSpan.html();
                            } else {
                                var oBtn = $('<a>').text('备注').attr('href', 'javascript:void(0)').addClass('c6')
                                        .attr('onclick', 'OnClickNote(' + index + ')').css('padding', '2px 0px');
                                oBtn.linkbutton({plain: false});
                                var oSpan = $('<span>');
                                oSpan.append(oBtn);
                                return oSpan.html();
                            }
                        }
                    }, {
                        field: '_opt',
                        title: '管理',
                        width: 50,
                        align: 'center',
                        formatter: function (value, row, index) {
                            if ($('#TableMember').datagrid('getData')["ManagerPlayerId"] == row.playerId) {
                                return "";
                            }
                            var oBtn = $('<a>').attr('href', 'javascript:void(0)')
                                    .attr('onclick', 'OnClickOpt(' + index + ')');
                            if (1 == row.locked) {
                                oBtn.text('解封').css('padding', '2px 0px').addClass('c4');
                            } else {
                                oBtn.text('管理').css('padding', '2px 0px').addClass('c3');
                            }
                            oBtn.linkbutton({plain: false});
                            var oSpan = $('<span>');
                            oSpan.append(oBtn);
                            return oSpan.html();
                        }
                    }, {
                        field: '_opt1',
                        title: '出售钻石',
                        align: 'center',
                        formatter: function (value, row, index) {
                        	/*if ($('#TableMember').datagrid('getData')["ManagerPlayerId"] == row.playerId) {
                                return "";
                            }*/		//允许给管理员自身账号出售钻石
                            var oBtn = $('<a>').text('出售钻石').attr('href', 'javascript:void(0)').addClass('c1')
                                    .attr('onclick', 'OnClickSale(' + index + ')').css('padding', '2px 0px');
                            oBtn.linkbutton({plain: false});
                            var oSpan = $('<span>');
                            oSpan.append(oBtn);
                            return oSpan.html();
                        }
                    }]
                ]
            });
    }

    function OnClickSearch() {
    	var clubId=$("#clubIdSelect").val();
        if (!clubId) {
            console.log('OnClickSearch()-->', 'clubId is null!');
            return;
        }
        var param = $('#SearchKey').val();
        $('#TableMember').datagrid({
            url: sys.context+'main/getMembers',
            method: 'post',
            onLoadSuccess: function (data) {
                console.log(data)
            },
            queryParams: {
                'clubId': clubId,
                'searchKey':param
            }
        });
    }

    function OnClickAllMember() {
        $('#SearchKey').val("");
        var clubId=$("#clubIdSelect").val(),managerId=$("#clubIdSelect option:selected").attr("data-clubManagerId");
    	if(clubId && managerId) InitTable(clubId,managerId);
    }

    function OnClickNote(nIndex) {
        var oDg = $('#TableMember');
        oDg.datagrid('selectRow', nIndex);
        var oRowData = oDg.datagrid('getSelected');
        if (oRowData) {
        	console.log(oRowData);
            $('#NoteOk').attr('data-cur-row', '' + nIndex);
            $('#NoteEdit').val(oRowData.remarks);
            $('#ModalNote').dialog('open').dialog('center');
        }
    }

    function OnClickCell(index, field, value) {
        if ('Comments' == field) {
            OnClickNote(index);
        }
    }

    function OnClickNoteOk() {
        var nDataIdx = parseInt($('#NoteOk').attr('data-cur-row'));
        var oDg = $('#TableMember');
        oDg.datagrid('selectRow', nDataIdx);
        var oRowData = oDg.datagrid('getSelected');
		var clubId=$("#clubIdSelect").val();
        if (!oRowData || !clubId) {
            return;
        }

        var oReqData = {};
        oReqData.clubId = clubId;
        oReqData.playerId = oRowData.playerId;
        oReqData.mappingId=oRowData.id;
        oReqData.action = "remarks";
        oReqData.comment = $('#NoteEdit').val();
        $.post(sys.context+'main/changeRemarks', oReqData, function (data) {
        	data=$.parseJSON(data);
        	if(!data["error"]){
	            $.messager.alert("提示", data['msg']);
	            $('#TableMember').datagrid('reload');
	            $('#ModalNote').dialog('close');
        	}else{
        		$.messager.alert("错误", data['msg'], 'error');
        	}
        }, "text").error(function () {
            $.messager.alert("错误", "备注失败！", 'error');
        });
    }

    function OnClickOpt(nIndex) {
        var oDg = $('#TableMember');
        oDg.datagrid('selectRow', nIndex);
        var oRowData = oDg.datagrid('getSelected'),clubId=$("#clubIdSelect").val();
        if (oRowData && clubId) {
        	console.log(oRowData);
            if (1 == oRowData.locked) {
                function requestEnable(playerId) {
                    var oReqData = {};
                    oReqData.clubId = clubId;
                    oReqData.action = 'enable';
                    oReqData.uid_list = [];
                    oReqData.uid_list[0] = playerId;
                    $.messager.alert("错误", "您无该功能权限，请向超级管理员申请权限!", 'error');
                   /* $.post(sys,oReqData, function (data) {
                        $.messager.alert("提示", data);
                        $('#TableMember').datagrid('reload');
                        $('#ModalConfirm').dialog('close');
                    }, "text").error(function () {
                        $.messager.alert("错误", "操作失败！", 'error');
                    });*/
                }
                var sContent = '是否将' + oRowData.playerName + '解封';
                modalConfirm(sContent, requestEnable.bind(this, oRowData.playerId));
            } else {
                $('#OptMemberName').html(oRowData.playerName);
                $('#OptMemberId').html(oRowData.playerId);
                $('#OptMemberId').data("mappingId",oRowData.id);
                $('#OptArrearage').html(oRowData.arrearage);
                $('#ModalOpt').attr('data-idx', nIndex);
                $('#ModalOpt').dialog('open').dialog('center');
            }
        }
    }

    function OnClickSale(nIndex) {
        var oDg = $('#TableMember');
        oDg.datagrid('selectRow', nIndex);
        var oRowData = oDg.datagrid('getSelected');
        if (oRowData) {
            console.log(oRowData)
            $('#SaleNum').val('');
            $('#BuyerName').html(oRowData.playerName);
            $('#BuyerId').html(oRowData.playerId);
            $('#BuyerBalance').html(oRowData.playerDiamond);
            $('#ModalSale').dialog('open').dialog('center');
        }
    }
    function OnClickKickOut() {
        function requestKickOut() {
            var nIndex = parseInt($('#ModalOpt').attr('data-idx'));
            var oDg = $('#TableMember');
            oDg.datagrid('selectRow', nIndex);
            var oRowData = oDg.datagrid('getSelected'),clubId=$("#clubIdSelect").val();
            if (!oRowData || !clubId) {
                return;
            }
            var oReqData = {};
            oReqData.clubId = clubId;
            oReqData.playerId = oRowData.playerId;
            $.post(sys.context+'main/kickOutClub',oReqData, function (data) {
            	data=$.parseJSON(data);
            	if(!data["error"]){
	                $.messager.alert("提示", data["msg"]);
	                $('#TableMember').datagrid('reload');
	                $('#ModalConfirm').dialog('close');
	                $('#ModalOpt').dialog('close');
            	}else{
            		$.messager.alert("错误", data["msg"], 'error');
            	}
            }, "text").error(function () {
                $.messager.alert("错误", "操作失败！", 'error');
            });
        }

        var sContent = '是否将' + $('#OptMemberName').html() + '踢出俱乐部';
        modalConfirm(sContent, requestKickOut.bind(this));
    }
    function OnClickSaleOk() {
        function requestSale() {
            var nSaleNum = parseInt($('#SaleNum').val());
            if (isNaN(nSaleNum)) {
                $.messager.alert("错误", "发货数量必须为数字！", 'error');
                return;
            }
            var oReqData = {};
            oReqData.playerId = parseInt($('#BuyerId').html());
            oReqData.diamond = nSaleNum;
            oReqData.note = '';
            oReqData.clubId=parseInt($("#clubIdSelect").val());
            $.post(sys.context+'main/agentSendOut',oReqData, function (data) {
            	data=$.parseJSON(data);
            	console.log(data);
            	if(data && !data["error"]){
	                $.messager.alert("提示", data["msg"]);
	                GetAgentInfo();
	                $('#TableMember').datagrid('reload');
	                $('#ModalConfirm').dialog('close');
	                $('#ModalSale').dialog('close');
	                $('#BalanceDiamond').html(data["data"]["agentCoin"]);
            	}else{
            		$.messager.alert("错误", data["msg"], 'error');
            	}
            }, "text").error(function () {
                $.messager.alert("错误", "发货失败！", 'error');
            });
        }

        var sContent = '是否为' + $('#BuyerName').html() + '充值' + $('#SaleNum').val() + '钻石';
        modalConfirm(sContent, requestSale.bind(this));
    }

    function modalConfirm(sContent, fOkCallback) {
        $('input').blur();
        $('#ModalConfirmContent').text(sContent);
        $('#ModalConfirmBtnOk').unbind('click');
        $('#ModalConfirmBtnOk').click(fOkCallback);
        $('#ModalConfirm').dialog('open').dialog('center');
    }

    function FormatterDropClub(oRow) {
        var sHtml = '<p>' + oRow.club_name + '</p>'
        return sHtml;
    }

    $.extend($.messager.defaults,{
        ok:"确定",
        cancel:"取消"
    });

  //清空欠费
    function clearArrearage(id){
		 function clear(){
		  	var id=$('#OptMemberId').data("mappingId");
	    	if(!id){
				console.log("clearArrearage------------->>id  is null or undefined");
				return false;
			}
			$.post(sys.context+"main/clearArrearage",{"mappingId":id},function(data){
				if(data && !data["error"]){
					$.messager.alert("提示", data["msg"]);
	                $('#TableMember').datagrid('reload');
				}else{
					$.messager.alert("错误", data["msg"], 'error');
				}
			},"json").error(function () {
	            $.messager.alert("错误", "操作失败！", 'error');
	        });
		}
		var sContent="是否清空成员"+$('#OptMemberName').html()+"所欠费用?";
		modalConfirm(sContent, clear.bind(this));
    }
    
    function changeName(){
        $.messager.prompt('修改', '请输入俱乐部名：', function(r){
            if(r){
                var club_id = $("#ClubId").text();
                $.ajax({
                    type:'get',
                    url:"#"+r,
                    success:function(msg){
                        if('修改成功' == msg){
                            $("#ClubName").text(r);
                        }
                        $.messager.alert("提示", msg);
                    }
                })
            }
        })

    }
</script>
</html>